<template>
  <div class="topic-list" :class="themeClass" :style="{minHeight: windowHeight}">
    <!--<xx-home></xx-home>-->
    <!--<xx-search></xx-search>-->

    <div class="title">Restaurants</div>

    <div class="delicacies">
      <div class="card container-background-color">
        <image mode="aspectFill" class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg"></image>
        <div class="box">
          <div class="name">
            Sweety Cake
            <div class="text-right color-text-regular">
              75m
            </div>
          </div>
          <div class="info color-text-secondary">70,Nevsky Avenue</div>
          <div class="rate">
            <van-rate :value="rate" size="12" />
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
// import XxHome from '@/components/Header'
// import XxSearch from '@/components/Search '
export default {
  components: {
  },
  computed: {
    ...mapState('shop', {
      windowHeight: state => state.theme.windowHeight
    }),
    ...mapGetters('shop', {
      activeSetting: 'theme/activeSetting'
    }),
    themeClass: function () {
      return `theme-` + this.activeSetting.name
    }
  },
  data () {
    return {
      rate: 3
    }
  },
  beforeCreate () {},
  created () {
    // 获取页面高度
    this.$store.dispatch('shop/theme/getSystemInfo')
  },
  beforeMount () {},
  mounted () {},
  onLoad (options) {},
  onReady () {},
  onShow () {},
  onHide () {},
  onUnload () {},
  /**
   * for other event handlers, please check https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
   */
  methods: {}
}
</script>

<style lang="scss">
  .topic-list {
    .title {
      height: 44px;
      line-height: 44px;
      margin-left: 30rpx;
      font-size: 16px;
      font-weight: bold;
    }
    .delicacies {
      margin: 20rpx 30rpx;
      .card {
        position: relative;
        display: inline-block;
        width: 690rpx;
        margin-top: 170rpx;
        margin-bottom: 40rpx;
        border-radius: 8px;
        box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
        .goods-img {
          position: absolute;
          display: block;
          top: -170rpx;
          left: 30rpx;
          border-radius: 8px;
          width: 630rpx;
          height: 340rpx;
        }
        .box {
          padding: 210rpx 40rpx 40rpx;
          .name {
            margin-bottom: 5px;
            .text-right {
              float: right;
              font-size: 12px;
            }
          }
          .info {
            font-size: 12px;
            margin-bottom: 5px;
          }
          .rate {
          }
        }
      }
    }
  }
</style>
